<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/cookie.js"></script>
    <style>
        .wrapHeader {
            background-color: #f5f5f5;
        }

        .header {
            width: 1226px;
            margin: 0 auto;
            line-height: 40px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }

        .header .header-nav-left {
            display: flex;
        }

        .header .header-nav-left li+li {
            margin-left: 10px;
        }

        .header .header-nav-left li .site-user {
            display: none;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
            margin-top: 20px;
        }

        .addGradeBox {
            margin-bottom: 20px;
        }

        .showGrade table {
            width: 100%;
            line-height: 40px;
            text-align: center;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .showGrade table th,
        .showGrade table td {
            border: 0.5px solid #333;
        }

        /* 遮罩层 */
        .shadow {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .shadow .editForm {
            padding: 20px;
            background-color: #f6f6f6;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .shadow .editForm .input-group {
            margin-bottom: 6px;
        }

        /* search */
        .searchOrderLimit {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 30px;
            font-size: 14px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .searchOrderLimit input[type="radio"] {
            vertical-align: middle;
        }

        .searchOrderLimit>* {
            height: 30px;
            margin-right: 20px;
        }

        .searchBar {
            display: flex;
        }

        .searchBar .searchCon {
            height: 30px;
            width: 250px;
            box-sizing: border-box;
            outline: none;
            border: 1px solid #999;
            border-right: 0;
        }

        .searchBar .searchBtn {
            display: block;
            width: 30px;
            height: 30px;
            background-color: #999;
        }

        .orderColBox,
        .orderTypeBox {
            height: 30px;
            padding: 0 10px;
            border: 1px dashed #999;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .orderColBox label,
        .orderTypeBox label {
            margin-right: 5px;
        }

        .pageBox {
            font-size: 12px;
            text-align: center;
            margin-top: 10px;
        }

        .pageBox span {
            padding: 0 5px;
        }
    </style>
</head>

<body>
    <div class="wrapHeader">
        <div class="header">
            <ul class="header-nav-left">
                <li>
                    <div class="site-sign">
                        <a href="./login.html">亲,请登录</a>
                        <a href="./register.html">免费注册</a>
                    </div>
                    <div class="site-user">
                        <a class="site-user-tips" href="javascript:;">欢迎,xxx</a>
                        <a class="site-user-exit" href="javascript:;">退出</a>
                    </div>
                </li>
                <li>
                    <a href="">手机逛淘宝</a>
                </li>
                <li>
                    <a href="">网页无障碍</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="addGradeBox">
            <a href="./addGrade.html"><button class="addGrade">添加成绩</button></a>
        </div>
        <form class="searchOrderLimit" onsubmit="return false">
            <div class="searchBar">
                <input type="text" class="searchCon">
                <a class="searchBtn" href="javascript:;"></a>
            </div>
            <div class="orderColBox">
                <label><input type="radio" name="orderCol" class="orderCol" value="id" checked="checked">默认</label>
                <label><input type="radio" name="orderCol" class="orderCol" value="chinese">语文</label>
                <label><input type="radio" name="orderCol" class="orderCol" value="math">数学</label>
                <label><input type="radio" name="orderCol" class="orderCol" value="english">英语</label>
                <label><input type="radio" name="orderCol" class="orderCol" value="total">总分</label>
            </div>
            <div class="orderTypeBox">
                <label><input type="radio" name="orderType" class="orderType" value="asc" checked="checked">升序</label>
                <label><input type="radio" name="orderType" class="orderType" value="desc">降序</label>
            </div>
            <select class="showSel">
                <option value="5" selected>每页显示5条</option>
                <option value="10">每页显示10条</option>
                <option value="15">每页显示15条</option>
                <option value="20">每页显示20条</option>
            </select>
            <input class="resetGrade" type="reset" value="重置">
        </form>
        <div class="showGrade">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>编辑</th>
                        <th>删除</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2210</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td><a href="javascript:;" class="edit">编辑</a></td>
                        <td><a href="javascript:;" class="delete">删除</a></td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2210</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td><a href="javascript:;" class="edit">编辑</a></td>
                        <td><a href="javascript:;" class="delete">删除</a></td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2210</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td><a href="javascript:;" class="edit">编辑</a></td>
                        <td><a href="javascript:;" class="delete">删除</a></td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>2210</td>
                        <td>55</td>
                        <td>66</td>
                        <td>77</td>
                        <td>198</td>
                        <td><a href="javascript:;" class="edit">编辑</a></td>
                        <td><a href="javascript:;" class="delete">删除</a></td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <div class="pageBox">
            <button class="prev">上一页</button>
            <span class="cur">13/91</span>
            <span class="tips">共453条</span>
            <button class="next">下一页</button>
        </div>
    </div>


    <div class="shadow">
        <form class="editForm" onsubmit="return false">
            <div class="input-group">
                <label>编号: <input type="text" disabled name="id"></label>
            </div>
            <div class="input-group">
                <label>姓名: <input type="text" disabled name="name"></label>
            </div>
            <div class="input-group">
                <label>班级: <input type="text" disabled name="class"></label>
            </div>
            <div class="input-group">
                <label>语文: <input type="text" name="ch"></label>
            </div>
            <div class="input-group">
                <label>数学: <input type="text" name="mh"></label>
            </div>
            <div class="input-group">
                <label>英语: <input type="text" name="eh"></label>
            </div>
            <div class="input-group">
                <input type="submit" class="subBtn" value="保存">
                <input type="reset" class="rstBtn" value="取消">
            </div>
        </form>
    </div>
</body>
<script>
    var siteSign = document.getElementsByClassName("site-sign")[0];
    var siteUser = document.getElementsByClassName("site-user")[0];

    var tbody = document.querySelector(".showGrade tbody");

    var shadow = document.getElementsByClassName("shadow")[0];
    var form = shadow.getElementsByClassName("editForm")[0];

    var subBtn = shadow.getElementsByClassName("subBtn")[0];
    var rstBtn = shadow.getElementsByClassName("rstBtn")[0];

    var searchForm = document.getElementsByClassName("searchOrderLimit")[0];
    var showSel = document.getElementsByClassName("showSel")[0];
    var prev = document.getElementsByClassName("prev")[0];
    var cur = document.getElementsByClassName("cur")[0];
    var tips = document.getElementsByClassName("tips")[0];
    var next = document.getElementsByClassName("next")[0];

    var lgc = getCookie("lgc");


    // wd col type page size  => 任意一个参数改变 都要重新调用接口 请求数据
    // 解决方法:
    // 1. 任意一个参数改变  重新获取 wd col type page size 五个参数 => 麻烦
    // 2. 定义五个全局变量 分别设置默认值 => 任意一个参数改变 => 只需改变对应的

    var wd = "";  // 全局变量 搜索的关键词(默认查询所有)
    var col = "id"; // 全局变量 排序的列名(默认按id)
    var type = "asc"; // 全局变量 排序的方式(默认升序)
    var page = 1;   // 全局变量 记录页码(默认显示第一页)
    var size = 5;    // 全局变量 每页显示多少条 (默认5条)



    if (lgc) {
        siteSign.remove();
        siteUser.style.display = "block";

        var siteUserTips = siteUser.firstElementChild;
        var siteUserExit = siteUser.lastElementChild;

        siteUserTips.textContent = `欢迎,${lgc}`;
        siteUserExit.onclick = function () {
            delCookie("lgc");
            location.reload();
        }
    }


    // 页面加载时 => 渲染成绩(默认搜索 所有 id 升序 第一页 每页显示五条)
    loadGrade();


    document.addEventListener("click", clickHandler);
    searchForm.addEventListener("click", searchHandler);


    function searchHandler(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        if (target.className == "searchBtn") {
            var searchCon = target.previousElementSibling;
            wd = searchCon.value.trim();
            loadGrade();
        } else if (target.className == "orderCol") {
            col = target.value;
            loadGrade();
        } else if (target.className == "orderType") {
            type = target.value;
            loadGrade();
        } else if (target.className == "resetGrade") {
            wd = "";  // 全局变量 搜索的关键词(默认查询所有)
            col = "id"; // 全局变量 排序的列名(默认按id)
            type = "asc"; // 全局变量 排序的方式(默认升序)
            page = 1;   // 全局变量 记录页码(默认显示第一页)
            size = 5;    // 全局变量 每页显示多少条 (默认5条)
            loadGrade();
        }
    }

    showSel.onchange = function () {
        size = this.value;
        // page = 1;
        loadGrade();
    }





    function clickHandler(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        if (target.className == "delete") {
            console.log(target);

            if (confirm("是否删除该学员成绩?")) {
                var tr = target.parentElement.parentElement;
                // tr.remove();

                var id = tr.dataset.id;     //属性节点

                var xhr = new XMLHttpRequest();

                xhr.open("get", "../php/deleteGradeById.php?id=" + id, true);

                xhr.send();

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var result = xhr.responseText;
                        result = JSON.parse(result);
                        console.log(result);

                        var { status, message } = result;
                        if (status) {
                            // tr.remove();
                            loadGrade();
                        } else {
                            alert(message);
                        }
                    }
                }


            }

        } else if (target.className == "edit") {
            shadow.style.display = "block";

            var tr = target.parentElement.parentElement;
            var id = tr.dataset.id;


            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/searchGradeById.php?id=" + id, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message, data } = result;
                    if (status) {
                        form.id.value = data.id;
                        form.name.value = data.name;
                        form.class.value = data.class;
                        form.ch.value = data.chinese;
                        form.mh.value = data.math;
                        form.eh.value = data.english;



                    } else {
                        alert(message);
                    }
                }
            }


        }
    }


    subBtn.onclick = function () {
        var id = form.id.value;
        var ch = form.ch.value;
        var mh = form.mh.value;
        var eh = form.eh.value;

        if (id && ch && mh && eh) {
            var xhr = new XMLHttpRequest();

            xhr.open("post", "../php/updateGradeById.php", true);

            // FormData
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(`id=${id}&ch=${ch}&mh=${mh}&eh=${eh}`);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;

                    result = JSON.parse(result);
                    console.log(result);
                    var { status, message } = result;
                    if (status) {
                        shadow.style.display = "none";
                        // location.reload();  => 更新成功  刷新页面 用户体验不好

                        // 能否在 不刷新整个页面的同时 => 将数据传递给后端 => 再将新的数据渲染
                        loadGrade();

                    } else {
                        alert(message);
                    }


                }
            }
        }

    }

    rstBtn.onclick = function () {
        shadow.style.display = "none";
    }




    function loadGrade() {   /*  按关键词搜索*/
        var xhr = new XMLHttpRequest();

        xhr.open("get", `../php/searchOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true);

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                result = JSON.parse(result);
                console.log(result);
                var { status, message, list, total, maxPage, current } = result;

                if (status) {
                    if (list) {

                        var html = "";

                        list.forEach(({ id, name, class: _class, chinese, math, english, total }) => {
                            html += `<tr data-id="${id}">
                    <td>${id}</td>
                    <td>${name}</td>
                    <td>${_class}</td>
                    <td>${chinese}</td>
                    <td>${math}</td>
                    <td>${english}</td>
                    <td>${total}</td>
                    <td><a href="javascript:;" class="edit" >编辑</a></td>
                    <td><a href="javascript:;" class="delete" >删除</a></td>
                </tr>`
                        })
                        tbody.innerHTML = html;

                        // 问题: 
                        // 页码多的 向 页码少 的切换时,如果全局page超出 页码少的数据的maxPage => 切换过程也会出现问题

                        // 解决方法:   如果超出最大页 就赋值为最大页 否则显示原页码
                        page = page > maxPage ? maxPage : page;

                        cur.textContent = `${current}/${maxPage}`;
                        tips.textContent = `共${total}条`;

                        prev.onclick = function () {
                            if (page <= 1) return false;
                            page--;
                            loadGrade();
                        }
                        next.onclick = function () {
                            if (page >= maxPage) return false;
                            page++;
                            loadGrade();
                        }

                    } else {
                        tbody.innerHTML = `<tr><td colspan="9">暂无数据</td></tr>`;
                    }
                } else {
                    alert(message);
                }
            }
        }
    }



</script>

</html>